<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
      xmlns="http://www.w3.org/1999/html" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" contect="http://www.webqin.net">
<title>详情页面</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<link type="text/css" href="css/css.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
 $(function(){
	 //导航定位
	 //$(".nav li:eq(6)").addClass("navCur");
  $(".headerpage").load("header.html");
  $(".footerpage").load("footer.html")
	 })
</script>
</head>

<body>
<!--调用头部-->
<div class="headerpage"></div>
 
 <div class="content" id="list">
  <div class="width1190" style="width:1000px;" >
   <div class="proImg fl">
    <img src="images/fangt1.jpg" />
<!--    <img v-bind:src="info.picture"-->
   </div><!--proImg/-->
   <div class="proText fr">
    <span class="zhiding" style="background-color:rgb(255,204,0);font-size: 24px;border: 3px solid rgb(255,204,0); position: relative;left: 431px;top: 40px">预约看房</a></span>
    <h3 class="proTitle">{{info.introduce}} </h3>
    <div class="proText1">
     地址：{{info.address}}<br />
     售价：{{allPrice}}万<br />
     户型：{{info.houseType}}<br />
     面积：{{info.area}}㎡<br/>
     电梯：{{isture}}<br/>
     家具：{{jiaju}}<br />
     交通：{{jiaotong}}<br />
     中介联系电话：{{info.agentId}}
    </div>

    <div class="xun-car">
     <a href="javascript:;" class="xwjg">¥<strong>{{info.price}}</strong>元/㎡</a>
     <a @click="goCollection" class="projrgwc">关注房源</a>

<!--     <a href="javascript:;" style="display:inline-block; text-align:center; background:url(../images/proxujian.gif) left center no-repeat;">预约看房</a>-->
    </div><!--xun-car/-->
   </div><!--proText/-->
   <div class="clears"></div>
  </div><!--width1190/-->
  <div class="proBox" style="width:1000px;margin:10px auto;">
  <div class="proEq">
   <ul class="fl">
    <li class="proEqCur">房源详情</li>
    <li>房源图片</li>
   </ul>
   <div class="lxkf fr"><a href="http://wpa.qq.com/msgrd?v=3&uin=1072631488&site=qq&menu=yes" target="_blank"></a></div>
   <div class="clears"></div>
  </div><!--proEq/-->
  <div class="proList">
   <span>{{info.detail}}</span>
  </div><!--proList/-->
  <div class="proList" >
   <li v-for="item in indo" style="width: 40%;height: 40%;display: inline;margin: 8px" ><img style="width: 300px;
            height: 300px;
            box-shadow:   rgba(243, 20, 20, 0.2) 0 2px 5px 0px;
            border-radius: 5px;border: 0px" v-bind:src="item.address" border="0"/></li>

  </div><!--proList/-->
  <div class="proList">
   暂无信息...
  </div><!--proList/-->
 </div><!--proBox/-->
  <div class="zhidinggoufang" style="position: absolute;top: 600px">
   <h2>预约看房 <span class="close">X</span></h2>
   <form>请选择预约时间：
    <input type="datetime-local" id="time" style="height: 200px;width: 300px"></input></br>
    <div class="zhidingsub"><input type="button" @click="setBook" value="提交" /></input></br></br>
     <h3>预约看房注意事宜：</h3>
     <p>1、预约看房申请提交后，客服中心会在24小时之内与您取得联系</p>
     <p>2、如有任何疑问，请随时拨打我们的电话：400-000-0000</p>
    </div>
    <input type="hidden" id="hId" v-model="info.id"><span style="display: none">{{info.id}}</span>
   </form>
  </div><!--zhidinggoufang/-->
 </div><!--content/-->

<div class="footerpage"></div>
</body>
</html>
<script type="text/javascript">
 var v=new Vue({
  el:'#list',
  data : {
   info : 1,
   indo : 1
  },
  mounted() {//自动发起后端请求，获取数据
   var str = window.location.search;
   str1 = 'http://localhost:8087/lin-house/getHouse' + str;
   pic = 'http://localhost:8087/lin-picture/getPicture' +str;
   axios.get(str1)
           .then(function (response) {
            v.info =response.data.data;
            console.log(v.info)
           })
           .catch(function (error) {
            console.log(error);
           });
   axios.get(pic)
           .then(function (response) {
            v.indo =response.data.data;
            console.log(v.indo)
           })
           .catch(function (error) {
            console.log(error);
           });
  },

  methods: {
   setBook (){
    var ltime = $("#time").val();
    var lid = $("#hId").val();
       console.log(lid)
    $.ajax({
     type: "post",
     url: "/lin-book/saveBook",
     data: {"bookTime":ltime,"houseId":lid},
     dataType : "json",
     success: function(data){
      if(data.code==201){
       alert(data.message)
      }else if(data.code==202){
       alert(data.message)
      }else if(data.code==203){
       alert(data.message)
      }else
      alert("预约成功");
     },
     error:function (){
      alert("预约失败,请稍后重试");
     }
    });
   },
   goCollection(){
    var lid = $("#hId").val();
    $.ajax({
     type: "post",
     url: "/lin-collection/saveCollection",
     data: {"houseId":lid},
     dataType : "json",
     success: function(data){
      if(data.code==201){
       alert(data.message)
      }else if (data.code==202){
       alert(data.message)
      }else
      alert("关注成功");
     },
     error:function (data){
       alert("关注失败，请稍后重试");
     }
    });
   }
 },

  computed:{
    isture(){
     return this.info.elevator==1 ? "没有":"有"
    },
   jiaju(){
    return this.info.furniture==1 ? "没有":"有"
   },
   jiaotong(){
    return this.info.traffic==1 ? "不方便":"方便"
   },
    allPrice(){
     let allPrice = 0;
     allPrice = this.info.area*this.info.price
     return allPrice
    },
  }
 });
</script>
